<template>
	<view class="box padding-l-r-30">
		<view class="title">{{item.title}}</view>
		<view class="flex-box">
			<text>S</text>
			<view class="community-name flex-1 only-1">{{item.admin.nickname}}</view>
			<view class="time"> {{item.createtime}}</view>
		</view>
		<view class="content">
			 <u-parse :content="item.content"></u-parse>
		</view>
		<view class="img-box">
			<image :src="BASE_URL + item.image" mode="widthFix"></image>
		</view>
	</view>
</template>

<script> 
    import {artDetail} from '@/api/home.js'
    import $baseUrl from "@/config/index.js"
    const BASE_URL = $baseUrl.baseUrl
	export default {
		data() {
			return {
				item: {
					imgSrc:'https://33.chunchuangkeji.cn/uploads/20250801/daf1bb34748479140c0c284db0484740.jpg',
					title: '这里是社区发布的标题',
					content: '这里是社区发布的具体内容',
					time: '2024-12-31 12:00',
					communityName: 'XXX社区'
				},
                id:'',
                BASE_URL
			}
		},
        onLoad(e){
            this.id = e.id
        },
        onShow(){
            this.goDetails()
        },
		methods: {
			goDetails( ) {
                artDetail({art_id:this.id}).then(res=>{
                    if (res.code == 1){
                        this.item = res.data
                    }else {
                        uni.showToast({
                            icon:'none',
                            title:res.msg
                        })
                    }
                })
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		min-height: 100vh;
		background: #FFF;

		.img-box {
			image {
				width: 100%;
				height: auto;
			}
		}

		.title {
			padding: 28rpx 0;
			font-size: 30rpx;
			color: #000;
			font-weight: bold;
		}

		.content {
			margin: 12rpx 0 20rpx;
			font-size: 26rpx;
			color:#000000;
		}

		.flex-box {
			align-items: center;
			margin: 24rpx 0 48rpx;
			text {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
				line-height: 30rpx;
				background: #43ABC4;
			}

			.community-name {
				max-width: 500rpx;
				padding: 0 8rpx;
				font-size: 24rpx;
				color: #000;
			}

			.time {
				font-size: 24rpx;
				color:#666666;
			}
		}
	}
</style>